Experimental Workload: Responsive Design by issackjohn · Pull Request #453 · WebKit/Speedometer

issackjohn · 2024-11-15T17:46:24Z

This pull request introduces a new experimental responsive design workload, featuring a single-page cooking website built with Lit and Tailwind CSS.

The hosted version can be found here.
Quick link to dev mode with workload selected.

Please look at the README in experimental/responsive-design for more information about the code and how it is organized.

Not included in this PR:

Support for different languages

issackjohn · 2024-11-15T19:29:31Z

Adding reviewers for visibility, feel free to take a look :)

rniwa · 2024-11-15T19:47:15Z

It seems to me that the test doesn't really take the advantage of responsive design since iframe's size is always same. Maybe we should add steps to resize iframe so that responsive design comes into play?

issackjohn · 2024-11-15T19:57:48Z

It seems to me that the test doesn't really take the advantage of responsive design since iframe's size is always same. Maybe we should add steps to resize iframe so that responsive design comes into play?

Currently, we are resizing the the iframe with id #content-iframe in the ReduceWidthIn5Steps & IncreaseWidthIn5Steps steps. Do you mean that we should be resizing a different iframe?

rniwa · 2024-11-15T20:14:05Z

It seems to me that the test doesn't really take the advantage of responsive design since iframe's size is always same. Maybe we should add steps to resize iframe so that responsive design comes into play?

Currently, we are resizing the the iframe with id #content-iframe in the ReduceWidthIn5Steps & IncreaseWidthIn5Steps steps. Do you mean that we should be resizing a different iframe

Oh, I see. We're resizing the inner iframe. I guess that works.

issackjohn · 2024-12-02T19:46:15Z

Gentle ping 😄

camillobruni · 2024-12-03T14:35:09Z

I still see rather short run times for individual steps (close to 1.6ms in chrome canary) which might introduce a bit too much noise in the long run.

Responsive-Design
Responsive-Design/LoadChatAndExpandRecipe	5.85	±	0.46 (7.9%)	ms
Responsive-Design/ReduceWidthIn5Steps  12.96	±	0.45 (3.5%)	ms
Responsive-Design/ScrollToChatAndSendMessage	1.68	±	0.07 (4.4%)	ms
Responsive-Design/IncreaseWidthIn5Steps	11.37	±	0.28 (2.5%)

ScrollToChatAndSendMessage and (and especially it's sub-items) will show some aliasing from timer resolution which is ~ 0.1ms on chrome.
In general, i'd bump the step durations by 1.5x or 2x even to be on par with other workloads.

issackjohn · 2024-12-05T23:26:44Z

I still see rather short run times for individual steps (close to 1.6ms in chrome canary) which might introduce a bit too much noise in the long run.
Responsive-Design
Responsive-Design/LoadChatAndExpandRecipe	5.85	±	0.46 (7.9%)	ms
Responsive-Design/ReduceWidthIn5Steps  12.96	±	0.45 (3.5%)	ms
Responsive-Design/ScrollToChatAndSendMessage	1.68	±	0.07 (4.4%)	ms
Responsive-Design/IncreaseWidthIn5Steps	11.37	±	0.28 (2.5%)	
ScrollToChatAndSendMessage and (and especially it's sub-items) will show some aliasing from timer resolution which is ~ 0.1ms on chrome. In general, i'd bump the step durations by 1.5x or 2x even to be on par with other workloads.

To bump up the step durations, I am thinking of

Expanding all the recipes as part of LoadChatAndExpandRecipe
Collapsing all the recipes as part of ScrollToChatAndSendMessage
2.1 Sending a few more messages in the chat instead of just one.

currently no proposed changes for ReduceWidthIn5Steps & IncreaseWidthIn5Steps

flashdesignory · 2024-12-10T03:12:13Z

Some visual questions - these might not be relevant to the tests:

Is this spacing as expected?

The collapsed grid looks fine, but once expanded, the item moves to the next row - is that expected?
collapsed

expanded

The video tiles don't work - those are just placeholders?

issackjohn · 2024-12-10T17:47:15Z

Some visual questions - these might not be relevant to the tests:

Is this spacing as expected?

I'll add a fix for that. The webpage was designed to be viewed in 800x600, as that's how it will appear within the benchmark.

The collapsed grid looks fine, but once expanded, the item moves to the next row - is that expected? collapsed

Yes, that is expected. Do we prefer a different behavior?

The video tiles don't work - those are just placeholders?

Yes, they are just placeholders. We intended the video elements to be there but did not plan for them to play any actual videos.

flashdesignory · 2024-12-10T18:50:53Z

Some visual questions - these might not be relevant to the tests:
Is this spacing as expected?

I'll add a fix for that. The webpage was designed to be viewed in 800x600, as that's how it will appear within the benchmark.

Thanks - I'd vote for supporting larger viewport sizes. This will ensure that the workload looks usable at larger viewports, in case we want to change what's supported in Speedometer later on.

The collapsed grid looks fine, but once expanded, the item moves to the next row - is that expected? collapsed

Yes, that is expected. Do we prefer a different behavior?

I guess it makes sense for the tests, since it shifts elements on the page. That said, it's not something you'd see on the web (hopefully). I'd expected a modal or something like that instead.

The video tiles don't work - those are just placeholders?

Yes, they are just placeholders. We intended the video elements to be there but did not plan for them to play any actual videos.

Thanks for clarifying.

flashdesignory · 2024-12-10T18:51:40Z

@issackjohn - maybe rebase / merge main, to get the updated test runner in there. That should ensure the checks don't fail.

camillobruni · 2024-12-10T19:16:45Z

Let's aim for > 5ms for each measured subtest (I'd still aim for roughly 10ms if possible). Does this sound reasonable?

issackjohn · 2024-12-11T17:08:31Z

@issackjohn - maybe rebase / merge main, to get the updated test runner in there. That should ensure the checks don't fail.

Sounds good.

issackjohn · 2024-12-11T17:09:55Z

Let's aim for > 5ms for each measured subtest (I'd still aim for roughly 10ms if possible). Does this sound reasonable?

Sounds reasonable to me, I'll add some more actions.

camillobruni · 2024-12-17T16:38:49Z

Just double checked on Chrome, Firefox, Safari and the noise levels are in-sync with the rest of the workloads.
The minimum step times look good now I would say.

issackjohn · 2025-01-22T19:27:25Z

Thanks! Looking forward to addressing anymore feedback from folks.

netlify · 2025-02-11T17:50:04Z

✅ Deploy Preview for webkit-speedometer-preview ready!

Name	Link
🔨 Latest commit	`0f2abd2`
🔍 Latest deploy log	https://app.netlify.com/projects/webkit-speedometer-preview/deploys/69fd186323980e00083c1d1b
😎 Deploy Preview	https://deploy-preview-453--webkit-speedometer-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

julienw

Ths looks pretty good to me!

I see that when running npm run dev the dist files get overridden. Do you know if we can make it so the dev files are written in a different location, to minimize risks of errors in the future?

Otherwise my main issue is that the width setting in ReduceWidthIn5Steps and IncreaseWidthIn5Steps don't seem to be captured properly, at least in Firefox on my current machine (which is a bit slow). IMO this needs to be fixed, but this can be done in a follow-up.

Then I have a few more minor comments here and there. I haven't looked very closely at the tailwind code because I'm not familiar with it.
Also I wonder if we could include matchMedia somewhere.

Thanks!

Please add new changes in a separate commit.

rniwa · 2025-05-21T18:03:11Z

+
+@layer utilities {
+    .content-auto {
+        content-visibility: auto;


Is content-visibility widely supported across browsers and used on popular sites?

My understanding is that it is newly baseline as of September 2024. https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility. I see conflicting information here though, it may also be limited availability?

It is also used on 4.65% of page loads on chrome according to https://chromestatus.com/metrics/css/timeline/popularity/662

content-visibility: auto (that specific value) doesn't seem supported in Safari according to MDN

Actually it seems supported partially in Safari.

From the chromestatus page, can we see which different values are used and not just the property?

Took a look and it seems like you can.

"auto" seems to be supported as of Safari 26 (2025-09-15⁩) so it's pretty new. Do we want to keep it?

We prefer to keep it. I'll let others comment as well. @rniwa

issackjohn · 2025-05-30T20:47:45Z

Then I have a few more minor comments here and there. I haven't looked very closely at the tailwind code because I'm not familiar with it. Also I wonder if we could include matchMedia somewhere.

Sounds good. I can look into incorporating matchMedia as a follow-up and see where it might make sense to add.

camillobruni · 2025-07-01T12:43:37Z

I see some lazy recalc-style happening outside the measured scope in chrome. (around 3ms) I'm not sure how we'd fully control this. From Devtools it clearly looks like work that was scheduled in the async phase.
I've tried to see whether this happens in Firefox as well, but couldn't spot this immediately.
Might be worthwhile checking on Safari as well.

issackjohn · 2025-07-21T15:48:07Z

I see some lazy recalc-style happening outside the measured scope in chrome. (around 3ms) I'm not sure how we'd fully control this. From Devtools it clearly looks like work that was scheduled in the async phase. I've tried to see whether this happens in Firefox as well, but couldn't spot this immediately. Might be worthwhile checking on Safari as well.

Now capturing in measured time on edge/chrome

ReduceWidthIn5Steps and IncreaseWidthIn5Steps when using getBoundingRectAndElementFromPoint
LoadChatAndExpandRecipes when using getBoundingClientRect.

Working on properly capturing the other steps when using getBoundingClientRect.

issackjohn · 2025-07-28T22:54:21Z

I see some lazy recalc-style happening outside the measured scope in chrome. (around 3ms) I'm not sure how we'd fully control this. From Devtools it clearly looks like work that was scheduled in the async phase. I've tried to see whether this happens in Firefox as well, but couldn't spot this immediately. Might be worthwhile checking on Safari as well.

Now capturing in measured time on edge/chrome

ReduceWidthIn5Steps and IncreaseWidthIn5Steps when using getBoundingRectAndElementFromPoint

LoadChatAndExpandRecipes when using getBoundingClientRect.

Working on properly capturing the other steps when using getBoundingClientRect.

All steps should now be properly captured.

I've observed that some work occasionally occurs outside the measured time following the ScrollToChatAndSendMessages step. From my understanding, this shouldn't be an issue. However, do we believe this activity should be included in the measured time? If we decide it's worth tracking, do you have any ideas of how we could capture that work?

issackjohn · 2025-08-05T16:47:56Z

@bgrins, @camillobruni, @rniwa, Could I get someone to take a look at the matchMedia implementation? Most of it is in experimental/responsive-design/src/lib/components/recipe-grid.js and used to switch the recipe cards to a compact version.

I'm still working on correctly capturing the other work caused by things like ResizeObserver within the measured time.

N/A

issackjohn · 2025-08-18T15:37:03Z

Gentle Ping. :)

issackjohn · 2025-08-26T16:48:48Z

Created #525 for safari CI run end2end Test failure.

issackjohn · 2025-10-20T18:18:05Z

Gentle ping :)

camillobruni · 2026-05-05T15:54:40Z

+        this._currentIndex = 0;
+        this._carouselWidth = 0;
+        // ResizeObserver is used primarily to exercise this API as part of the benchmark.
+        this._resizeObserver = new ResizeObserver((entries) => {


maybe it would be nice to track the number of resize events we get so we can verify that this is concistent across browsers (console.warn + a strict unittest or so)

I will do this in a follow up, thanks!

camillobruni · 2026-05-05T15:57:39Z

Generally LGTM especially for experimental.

I'd love to land this so we can start tracking in and see how well it behaves.

issackjohn force-pushed the responsive-design branch 2 times, most recently from 1da5897 to 34a545e Compare November 15, 2024 19:19

issackjohn requested review from julienw and removed request for julienw November 15, 2024 19:22

issackjohn marked this pull request as ready for review November 15, 2024 19:22

issackjohn requested review from bgrins, camillobruni, flashdesignory, julienw and rniwa November 15, 2024 19:27

camillobruni reviewed Dec 3, 2024

View reviewed changes

Comment thread experimental/responsive-design/index.html Outdated

issackjohn force-pushed the responsive-design branch from cd96d0b to 3413c3d Compare December 11, 2024 17:36

issackjohn force-pushed the responsive-design branch from 057e604 to e7887e9 Compare February 11, 2025 17:49

issackjohn force-pushed the responsive-design branch from e7887e9 to 698c725 Compare March 14, 2025 21:34

julienw previously requested changes Apr 17, 2025

View reviewed changes

issackjohn force-pushed the responsive-design branch from 698c725 to 2a3113e Compare May 19, 2025 21:28

camillobruni reviewed May 21, 2025

View reviewed changes

Comment thread resources/tests.mjs Outdated

rniwa reviewed May 21, 2025

View reviewed changes

Comment thread experimental/responsive-design/src/lib/components/information-window.js

issackjohn requested review from camillobruni, julienw and rniwa June 3, 2025 16:16

julienw removed their request for review July 11, 2025 15:22

issackjohn force-pushed the responsive-design branch from b1de2cf to 8552b1e Compare July 11, 2025 23:15

issackjohn force-pushed the responsive-design branch from b6e0396 to d049bc2 Compare August 25, 2025 22:39

issackjohn force-pushed the responsive-design branch from c7327fe to cc37f6c Compare December 23, 2025 20:52

camillobruni reviewed May 5, 2026

View reviewed changes

camillobruni approved these changes May 5, 2026

View reviewed changes

issackjohn force-pushed the responsive-design branch from cc37f6c to eed2854 Compare May 7, 2026 22:54

Add responsive design benchmark

0f2abd2

issackjohn force-pushed the responsive-design branch from eed2854 to 0f2abd2 Compare May 7, 2026 22:55

Conversation

issackjohn commented Nov 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

issackjohn commented Nov 15, 2024

Uh oh!

rniwa commented Nov 15, 2024

Uh oh!

issackjohn commented Nov 15, 2024

Uh oh!

rniwa commented Nov 15, 2024

Uh oh!

issackjohn commented Dec 2, 2024

Uh oh!

camillobruni commented Dec 3, 2024

Uh oh!

Uh oh!

issackjohn commented Dec 5, 2024

Uh oh!

flashdesignory commented Dec 10, 2024

Uh oh!

issackjohn commented Dec 10, 2024

Uh oh!

flashdesignory commented Dec 10, 2024

Uh oh!

flashdesignory commented Dec 10, 2024

Uh oh!

camillobruni commented Dec 10, 2024

Uh oh!

issackjohn commented Dec 11, 2024

Uh oh!

issackjohn commented Dec 11, 2024

Uh oh!

camillobruni commented Dec 17, 2024

Uh oh!

issackjohn commented Jan 22, 2025

Uh oh!

netlify Bot commented Feb 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for webkit-speedometer-preview ready!

Uh oh!

julienw left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

issackjohn commented May 30, 2025

Uh oh!

camillobruni commented Jul 1, 2025

Uh oh!

issackjohn commented Jul 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

issackjohn commented Jul 28, 2025

Uh oh!

issackjohn commented Aug 5, 2025

issackjohn commented Nov 15, 2024 •

edited

Loading

netlify Bot commented Feb 11, 2025 •

edited

Loading

issackjohn commented Jul 21, 2025 •

edited

Loading

camillobruni May 5, 2026 •

edited

Loading